 <template>
 <div class="wh100">
  <div class="login-login">
  <center><h2>账号登录</h2></center>
   <a-form :model="formState" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="手机号" name="username">
      <a-input v-model:value="formState.username" placeholder="输入账号">
         
      </a-input>
    </a-form-item>
     
    <a-form-item label="密码" name="confirmPassword">
      <a-input
        v-model:value="formState.confirmPassword"
        type="password"
        placeholder="确认密码"
      > 
      </a-input>
    </a-form-item>
    
    <a-form-item >
       <div class="passwords">
        <a-buttom type="link">短信验证码登录</a-buttom>
        <a-switch v-model:checked="checked1" checked-children="记住密码" un-checked-children="不记住密码"  class="bac"/>
       </div>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" class="bac" style="width:100%">登录</a-button>
    </a-form-item>
    <a-form-item >
       <center>
        <a-space>
         <a-buttom type="link" class="tss" @click="handleR">注册</a-buttom>
        <a-buttom type="link" class="tss"  @click="handleF">忘记密码</a-buttom>
        <a-buttom type="link" class="tss">常见问题</a-buttom>
        </a-space>
       </center>
    </a-form-item>
  </a-form>
  </div>
  </div>
</template>
 
<script setup>
import { reactive,ref } from 'vue';
import { UserOutlined, LockOutlined, MessageOutlined } from '@ant-design/icons-vue';
 	import { useRouter } from 'vue-router';

	const router = useRouter(); 
  const handleR=()=>{ 
		router.push('/Regester');

  }
    const handleF=()=>{ 
		router.push('/Forget');

  }
  
 const checked1=ref(true);


  
const formState = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  captcha: '',
  remember: false,
});
 
const onFinish = (values) => {
  console.log('Received values of form: ', values);
};
 
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
</script>
 
<style scoped>
.wh100{
  width:100vw;
  height:100vh;
    background: rgba(247, 247, 247, 1);
     display: flex;
    flex-direction: column;
    justify-content: center;
}
.tss{
  color: rgba(0, 174, 198, 1)
}
 .login-login{
  width:600px; 
  margin:0 auto;
  background:#fff;
  padding:20px;
  
 }
 .bac{
 background: rgba(0, 174, 198, 1);
 cursor: pointer;
}
.passwords{
  width:100%;
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: space-between;

}
</style>